<template>
  <div class="cesium-draw">
    <div id="cesium-drawer" />

    <mapOptions :viewer="viewer" />

    <div class="mouse-postion">{{ nowPostion.wgs84 }}</div>
  </div>
</template>

<script>
//参考：Cesium深入浅出之图层管理器
// https://blog.csdn.net/fywindmoon/article/details/113747843
import { DownOutlined, EditOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref, watch } from 'vue';
import * as Cesium from '@cesium/Source/Cesium.js';
import MousePosition from '../utils/mousePosition.js';
import mapOptions from '@funcComp/mapOptions';
import CesiumNavigation from 'cesium-navigation-es6';
import PolylineTrailLinkMaterialProperty from './flyLine';
import {
  imgTileServiceImageryProviderCreator,
  vecTileServiceImageryProviderCreator,
  terTileServiceImageryProviderCreator,
  ciaTileServiceImageryProviderCreator,
  img_tdt_yx,
  img_tdt_sl,
  img_tdt_dx,
  img_tdt_anno,
  imageryProvider
} from '@lib/provider/tdt.js';

import { arcGisMapServerImageryProviderCreator, arcGisMapServerStreetMapImageryProviderCreator } from '@lib/provider/arcgis.js';
import flyLineData from './data';

const imageryProviderViewModels = [img_tdt_yx(), img_tdt_dx(), img_tdt_sl(), img_tdt_anno()];

export default defineComponent({
  components: { mapOptions, DownOutlined, EditOutlined },
  setup() {
    return {
      viewer: null
    };
  },
  data() {
    return {
      nowPostion: {}
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.initViewer();
  },
  beforeUnmount() {
    if (this.viewer) {
      this.viewer.destroy();
      this.viewer = null;
    }
  },
  methods: {
    onViewerInited(viewer) {
      let vm = this;
      new MousePosition(viewer, pos => {
        vm.nowPostion = pos;
      });
      this.createFlyLines(flyLineData);
    },
    createFlyLines(data) {
      const center = data.center;
      const cities = data.points;
      const startPoint = Cesium.Cartesian3.fromDegrees(center.lon, center.lat, 0);

      //中心点
      this.viewer.entities.add({
        position: startPoint,
        point: {
          pixelSize: center.size,
          color: center.color
        }
      });

      //大批量操作时，临时禁用事件可以提高性能
      this.viewer.entities.suspendEvents();

      //散点
      cities.map(city => {
        let material = new PolylineTrailLinkMaterialProperty({
          color: Cesium.Color.GREEN,
          duration: 3000,
          trailImage: 'images/colors1.png'
        });

        const endPoint = Cesium.Cartesian3.fromDegrees(city.lon, city.lat, 0);
        this.viewer.entities.add({
          position: endPoint,
          point: {
            pixelSize: city.size - 10,
            color: city.color
          }
        });

        this.viewer.entities.add({
          polyline: {
            positions: this.generateCurve(startPoint, endPoint),
            width: 1,
            material: material
          }
        });
      });

      this.viewer.entities.resumeEvents();
      this.viewer.flyTo(this.viewer.entities);
    },

    /**
     * 生成流动曲线
     * @param startPoint 起点
     * @param endPoint 终点
     * @returns {Array}
     */
    generateCurve(endPoint, startPoint) {
      let addPointCartesian = new Cesium.Cartesian3();

      Cesium.Cartesian3.add(startPoint, endPoint, addPointCartesian);

      let midPointCartesian = new Cesium.Cartesian3();

      Cesium.Cartesian3.divideByScalar(addPointCartesian, 2, midPointCartesian);

      let midPointCartographic = Cesium.Cartographic.fromCartesian(midPointCartesian);

      midPointCartographic.height = Cesium.Cartesian3.distance(startPoint, endPoint) / 5;

      let midPoint = new Cesium.Cartesian3();

      Cesium.Ellipsoid.WGS84.cartographicToCartesian(midPointCartographic, midPoint);

      let spline = new Cesium.CatmullRomSpline({
        times: [0.0, 0.5, 1.0],
        points: [startPoint, midPoint, endPoint]
      });

      let curvePoints = [];
      for (let i = 0, len = 200; i < len; i++) {
        curvePoints.push(spline.evaluate(i / len));
      }

      return curvePoints;
    },

    initViewer() {
      let vm = this;
      Cesium.Ion.defaultAccessToken = $accessToken.default;
      var viewer = new Cesium.Viewer('cesium-drawer', {
        // imageryProvider: osm,
        contextOptions: {
          webgl: {
            alpha: true
          }
        },
        animation: false,
        // baseLayerPicker: false,
        fullscreenButton: false,
        vrButton: false,
        homeButton: false,
        timeline: false,
        imageryProvider: arcGisMapServerImageryProviderCreator(),
        // imageryProviderViewModels, //可供BaseLayerPicker选择的图像图层ProviderViewModel数组
        selectionIndicator: false,
        infoBox: false
        // 注释时相当于使用默认地形，解开注释相当于使用全球地形
        // terrainProvider
      });

      this.viewer = viewer;
      // viewer.imageryLayers._layers.forEach(e=>e.show=false);

      viewer.imageryLayers._layers.forEach(e=>e.show=false); 

      this.onViewerInited(viewer);
    }
  }
});
</script>

<style scoped lang="less">
.cesium-draw {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: white;
  font-size: 14px;

  #cesium-drawer {
    width: 100%;
    height: 100%;
    overflow: hidden;
    :deep(.cesium-viewer-bottom) {
      display: none !important;
    }
  }

  .mouse-postion {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 14px;
    padding: 8px 12px;
    line-height: 16px;
    color: white;
    z-index: 9999;
    background-color: rgba(40, 48, 60, 1);
    border-radius: 3px;
    opacity: 0.8;
  }
}

.chart-container {
  position: absolute;
  bottom: 7px;
  left: 7px;
  background-color: rgba(0, 0, 0, 0.5);

  #profileChart {
    width: 600px;
    height: 300px;
  }
}
</style>
